<template>
  <div class="system-container">
    <el-card shadow="hover" class="system-card">
      <template #header>
        <div class="card-header">
          <span>VR任务参数配置</span>
          <div class="header-operations">
            <el-button type="success" plain @click="saveAllSettings">
              <el-icon><Check /></el-icon>保存所有设置
            </el-button>
            <el-button type="warning" plain @click="resetSettings">
              <el-icon><RefreshLeft /></el-icon>重置默认值
            </el-button>
          </div>
        </div>
      </template>

      <el-tabs v-model="activeTab" type="card">
        <!-- 基础参数设置 -->
        <el-tab-pane label="基础参数" name="basic">
          <el-form :model="basicSettings" label-width="180px" label-position="left">
            <el-form-item label="任务完成时限(秒)">
              <el-input-number v-model="basicSettings.timeLimit" :min="60" :max="600" :step="30" />
              <span class="form-tip">设置用户完成任务的最大时间限制</span>
            </el-form-item>
            <el-form-item label="任务难度等级">
              <el-select v-model="basicSettings.difficultyLevel" style="width: 200px">
                <el-option label="简单" value="easy" />
                <el-option label="中等" value="medium" />
                <el-option label="困难" value="hard" />
                <el-option label="专家" value="expert" />
              </el-select>
              <span class="form-tip">影响场景复杂度和评分标准</span>
            </el-form-item>
            <el-form-item label="火灾蔓延速度">
              <el-slider v-model="basicSettings.fireSpreadSpeed" :min="1" :max="10" :step="1" show-stops />
              <span class="form-tip">值越大，火势蔓延越快</span>
            </el-form-item>
            <el-form-item label="烟雾浓度">
              <el-slider v-model="basicSettings.smokeIntensity" :min="1" :max="10" :step="1" show-stops />
              <span class="form-tip">影响用户在场景中的能见度</span>
            </el-form-item>
            <el-form-item label="声音效果音量">
              <el-slider v-model="basicSettings.soundVolume" :min="0" :max="100" :step="5" show-stops />
              <span class="form-tip">调整场景中警报、火灾等声音效果音量</span>
            </el-form-item>
            <el-form-item label="启用教学提示">
              <el-switch v-model="basicSettings.enableTutorial" />
              <span class="form-tip">为初次使用的用户提供操作指导</span>
            </el-form-item>
            <el-form-item label="启用实时评分">
              <el-switch v-model="basicSettings.enableRealTimeScoring" />
              <span class="form-tip">在任务过程中实时显示用户得分</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 场景配置 -->
        <el-tab-pane label="场景配置" name="scene">
          <el-form :model="sceneSettings" label-width="180px" label-position="left">
            <el-form-item label="默认场景类型">
              <el-select v-model="sceneSettings.defaultSceneType" style="width: 200px">
                <el-option label="家庭" value="home" />
                <el-option label="办公室" value="office" />
                <el-option label="学校" value="school" />
                <el-option label="商场" value="mall" />
                <el-option label="工厂" value="factory" />
              </el-select>
            </el-form-item>
            <el-form-item label="随机场景元素">
              <el-switch v-model="sceneSettings.randomElements" />
              <span class="form-tip">每次任务随机变化场景中的物品位置</span>
            </el-form-item>
            <el-form-item label="天气效果">
              <el-select v-model="sceneSettings.weatherEffect" style="width: 200px">
                <el-option label="无" value="none" />
                <el-option label="雨天" value="rain" />
                <el-option label="夜晚" value="night" />
                <el-option label="大风" value="wind" />
              </el-select>
              <span class="form-tip">影响逃生难度和视觉效果</span>
            </el-form-item>
            <el-form-item label="障碍物数量">
              <el-slider v-model="sceneSettings.obstacleCount" :min="0" :max="10" :step="1" show-stops />
              <span class="form-tip">场景中随机生成的障碍物数量</span>
            </el-form-item>
            <el-form-item label="出口数量">
              <el-input-number v-model="sceneSettings.exitCount" :min="1" :max="5" :step="1" />
              <span class="form-tip">场景中可用的安全出口数量</span>
            </el-form-item>
            <el-form-item label="灭火器位置">
              <el-select v-model="sceneSettings.extinguisherLocations" multiple style="width: 350px">
                <el-option label="入口处" value="entrance" />
                <el-option label="走廊" value="corridor" />
                <el-option label="厨房" value="kitchen" />
                <el-option label="办公室" value="office" />
                <el-option label="电梯旁" value="elevator" />
                <el-option label="楼梯间" value="stairwell" />
              </el-select>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- NPC互动配置 -->
        <el-tab-pane label="NPC互动" name="npc">
          <el-form :model="npcSettings" label-width="180px" label-position="left">
            <el-form-item label="NPC数量">
              <el-input-number v-model="npcSettings.npcCount" :min="0" :max="10" :step="1" />
              <span class="form-tip">场景中出现的NPC人物数量</span>
            </el-form-item>
            <el-form-item label="NPC行为模式">
              <el-select v-model="npcSettings.behaviorMode" style="width: 200px">
                <el-option label="被动等待救援" value="passive" />
                <el-option label="主动寻找出口" value="active" />
                <el-option label="恐慌行为" value="panic" />
                <el-option label="混合行为" value="mixed" />
              </el-select>
              <span class="form-tip">NPC在火灾中的反应方式</span>
            </el-form-item>
            <el-form-item label="NPC互动复杂度">
              <el-slider v-model="npcSettings.interactionComplexity" :min="1" :max="5" :step="1" show-stops />
              <span class="form-tip">影响与NPC互动的难度和深度</span>
            </el-form-item>
            <el-form-item label="NPC需要救援">
              <el-switch v-model="npcSettings.requireRescue" />
              <span class="form-tip">是否需要救援NPC才能完成任务</span>
            </el-form-item>
            <el-form-item label="NPC语音提示">
              <el-switch v-model="npcSettings.voicePrompts" />
              <span class="form-tip">NPC是否会提供语音提示</span>
            </el-form-item>
            <el-form-item label="NPC随机位置">
              <el-switch v-model="npcSettings.randomPositions" />
              <span class="form-tip">每次任务随机NPC位置</span>
            </el-form-item>
          </el-form>
        </el-tab-pane>

        <!-- 评分系统配置 -->
        <el-tab-pane label="评分系统" name="scoring">
          <el-form :model="scoringSettings" label-width="180px" label-position="left">
            <el-form-item label="时间得分权重(%)">
              <el-slider v-model="scoringSettings.timeWeight" :min="0" :max="100" :step="5" show-stops />
              <span class="form-tip">完成时间在总分中的占比</span>
            </el-form-item>
            <el-form-item label="操作正确性权重(%)">
              <el-slider v-model="scoringSettings.operationWeight" :min="0" :max="100" :step="5" show-stops />
              <span class="form-tip">操作正确性在总分中的占比</span>
            </el-form-item>
            <el-form-item label="安全意识权重(%)">
              <el-slider v-model="scoringSettings.safetyWeight" :min="0" :max="100" :step="5" show-stops />
              <span class="form-tip">安全意识在总分中的占比</span>
            </el-form-item>
            <el-form-item label="救援行为权重(%)">
              <el-slider v-model="scoringSettings.rescueWeight" :min="0" :max="100" :step="5" show-stops />
              <span class="form-tip">救援行为在总分中的占比</span>
            </el-form-item>
            <el-form-item label="通过分数线">
              <el-input-number v-model="scoringSettings.passingScore" :min="0" :max="100" :step="5" />
              <span class="form-tip">任务通过的最低分数要求</span>
            </el-form-item>
            <el-form-item label="错误操作扣分">
              <el-input-number v-model="scoringSettings.errorPenalty" :min="0" :max="20" :step="1" />
              <span class="form-tip">每次错误操作扣除的分数</span>
            </el-form-item>
            <el-form-item label="超时扣分(每10秒)">
              <el-input-number v-model="scoringSettings.timeoutPenalty" :min="0" :max="10" :step="1" />
              <span class="form-tip">超过时限每10秒扣除的分数</span>
            </el-form-item>
          </el-form>
          <div class="weight-warning" v-if="totalWeight !== 100">
            <el-alert
              :title="`权重总和为 ${totalWeight}%，请调整使总和为100%`"
              type="warning"
              show-icon
            />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { API_BASE_URL } from '@/utils/constants'

// 当前激活的标签页
const activeTab = ref('basic')

// 基础参数设置
const basicSettings = reactive({
  timeLimit: 180,
  difficultyLevel: 'medium',
  fireSpreadSpeed: 5,
  smokeIntensity: 6,
  soundVolume: 80,
  enableTutorial: true,
  enableRealTimeScoring: true
})

// 场景配置
const sceneSettings = reactive({
  defaultSceneType: 'office',
  randomElements: true,
  weatherEffect: 'none',
  obstacleCount: 3,
  exitCount: 2,
  extinguisherLocations: ['entrance', 'corridor', 'stairwell']
})

// NPC互动配置
const npcSettings = reactive({
  npcCount: 3,
  behaviorMode: 'mixed',
  interactionComplexity: 3,
  requireRescue: true,
  voicePrompts: true,
  randomPositions: true
})

// 评分系统配置
const scoringSettings = reactive({
  timeWeight: 25,
  operationWeight: 35,
  safetyWeight: 25,
  rescueWeight: 15,
  passingScore: 60,
  errorPenalty: 5,
  timeoutPenalty: 2
})

// 计算权重总和
const totalWeight = computed(() => {
  return scoringSettings.timeWeight + 
         scoringSettings.operationWeight + 
         scoringSettings.safetyWeight + 
         scoringSettings.rescueWeight
})

// 保存所有设置
const saveAllSettings = () => {
  if (activeTab.value === 'scoring' && totalWeight.value !== 100) {
    ElMessage({
      message: '评分权重总和必须为100%，请调整后再保存',
      type: 'warning'
    })
    return
  }
  
  // 模拟API保存请求
  setTimeout(() => {
    ElMessage({
      message: '系统配置已成功保存',
      type: 'success'
    })
    
    // 这里应该有实际的API调用来保存配置
    console.log('保存配置:', {
      basic: basicSettings,
      scene: sceneSettings,
      npc: npcSettings,
      scoring: scoringSettings
    })
  }, 500)
}

// 重置设置为默认值
const resetSettings = () => {
  ElMessageBox.confirm(
    '确定要重置所有设置为默认值吗？这将丢失当前的所有修改。',
    '重置确认',
    {
      confirmButtonText: '确定重置',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 重置基础参数
    Object.assign(basicSettings, {
      timeLimit: 180,
      difficultyLevel: 'medium',
      fireSpreadSpeed: 5,
      smokeIntensity: 6,
      soundVolume: 80,
      enableTutorial: true,
      enableRealTimeScoring: true
    })
    
    // 重置场景配置
    Object.assign(sceneSettings, {
      defaultSceneType: 'office',
      randomElements: true,
      weatherEffect: 'none',
      obstacleCount: 3,
      exitCount: 2,
      extinguisherLocations: ['entrance', 'corridor', 'stairwell']
    })
    
    // 重置NPC配置
    Object.assign(npcSettings, {
      npcCount: 3,
      behaviorMode: 'mixed',
      interactionComplexity: 3,
      requireRescue: true,
      voicePrompts: true,
      randomPositions: true
    })
    
    // 重置评分系统
    Object.assign(scoringSettings, {
      timeWeight: 25,
      operationWeight: 35,
      safetyWeight: 25,
      rescueWeight: 15,
      passingScore: 60,
      errorPenalty: 5,
      timeoutPenalty: 2
    })
    
    ElMessage({
      message: '所有设置已重置为默认值',
      type: 'success'
    })
  }).catch(() => {
    // 用户取消重置
  })
}

// 组件挂载时的初始化
onMounted(() => {
  // 这里可以从API获取当前配置
  // 模拟从API获取配置
  setTimeout(() => {
    // 实际项目中这里应该有API调用来获取当前配置
  }, 500)
})
</script>

<style scoped>
.system-container {
  padding: 10px;
}

.system-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-operations {
  display: flex;
  gap: 10px;
}

.form-tip {
  margin-left: 10px;
  color: #909399;
  font-size: 13px;
}

.weight-warning {
  margin-top: 20px;
}
</style>